<template>
    <div class="component-capital-info app-right-icon" @click="$emit('onclick')">
        <div class="title">{{data.name}}</div>
        <div class="info-box">
            <div class="item">金额：<span>{{data.amount}}</span></div>
            <div class="item">收益：<span>{{data.profit}}</span></div>
            <div class="item">评级：<span>{{data.level}}</span></div>
            <div class="item">期限：<span>{{data.term}}</span></div>
            <div class="item">国企：<span>{{data.country}}</span></div>
            <div class="item">担保：<span>{{data.guarantee}}</span></div>
        </div>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';
    
    .component-capital-info{
        padding: 1.6rem 1.5rem 1rem;

        &+.component-capital-info{
            border-top: 1px solid @color-line-gray;
        }

        .content{

        }

        .title{
            font-size: 1.5rem;
            line-height: 2.1rem;
            margin-bottom: .7rem;
        }

        .info-box{
            line-height: 2rem;
            margin-bottom: .6rem;
            &:after{
                content: '';
                display: block;
                clear: both;
            }
            .item{
                width: 50%;
                float: left;
                span{
                    color: @color-text-red;
                }
            }
        }

    }
    
</style>

<script>
    export default {
        props: ['data']
    }
</script>